<template>
    <div>
        <div class="container">
            <div class="handle-box">
                <el-button
                    id="asd3"
                    type="primary"
                    icon="el-icon-lx-add"
                    class="handle-del mr10"
                    @click="insertDept()"
                >新增部门
                </el-button>
                
                <el-input v-model="form1.deptName" placeholder="部门名称" class="handle-input mr10"></el-input> 
                <el-button type="primary" icon="el-icon-search" @click="selectDept()">搜索</el-button>
                <el-button type="primary" icon="el-icon-refresh" @click="resetDept()">重置</el-button>
            </div>


            <el-table
                :data="tableData"
                border
                class="table"
                ref="multipleTable"
                header-cell-class-name="table-header">
                <el-table-column prop="deptId" label="部门ID" align="center"></el-table-column>
                <el-table-column prop="deptName" label="部门名称" align="center"></el-table-column>
                <el-table-column prop="deptStatus.deptStatusName" label="部门状态" align="center"></el-table-column>
                <el-table-column prop="deptCount" label="部门人数" align="center"></el-table-column>
        
                <el-table-column label="操作" width="180" align="center">
                    <template slot-scope="scope">
                        <el-button
                            type="text"
                            icon="el-icon-lx-comment"
                            @click="openFileForDetails(scope.row.deptId)"
                        >员工</el-button>
                        <el-button
                            type="text"
                            icon="el-icon-edit"
                            @click="openUpdate(scope.$index, scope.row)"
                        >修改</el-button>
                        <el-button
                            type="text"
                            icon="el-icon-delete"
                            class="red"
                            @click="DeleteDeptStatus(scope.$index, scope.row)"
                        >解散</el-button>
                    </template>
                </el-table-column>
            </el-table>

        <!-- 部门员工弹出框 -->
        <el-drawer
            title="部门员工"
            :visible.sync="drawer"
            :direction="direction"
            class="drawer-1">
            <el-table
                :data="tableData2"
                border
                class="table"
                ref="multipleTable"
                header-cell-class-name="table-header">
                <el-table-column prop="dept.deptName" label="部门名称" align="center"></el-table-column>
                <el-table-column prop="empId" label="员工ID" align="center"></el-table-column>
                <el-table-column prop="empName" label="员工名称" align="center"></el-table-column>
                <el-table-column prop="empSex" label="员工性别" align="center"></el-table-column>
                <el-table-column prop="empAge" label="员工年龄" align="center"></el-table-column>
                <el-table-column prop="empEducation" label="学历" align="center"></el-table-column>
                <el-table-column prop="empMajor" label="专业" align="center"></el-table-column>
                <el-table-column prop="empStatus.empStatusName" label="员工状态" align="center"></el-table-column>
            </el-table>
            <!-- 分页 -->
            <div class="page">
                
                 <el-pagination  @size-change="handleSizeChange2" @current-change="handleCurrentChange2"
                 v-model="form3" :current-page="form3.pageNum" :page-sizes="[1,3,5]" :page-size="form3.pageSize"
                 layout="total, sizes, prev, pager, next, jumper" :total="form3.total"></el-pagination>
            </div>
        </el-drawer>
        


        <!-- 编辑弹出框 -->
        <el-dialog title="修改部门" :visible.sync="updateEmpinfo" width="45%">
            <el-form ref="form" :model="form" label-width="90px">
                <el-form-item label="部门名称">
                    <el-input v-model="form.deptName"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="updateEmpinfo = false">取 消</el-button>
                <el-button type="primary" @click="updateEmp()">确 定</el-button>
            </span>
        </el-dialog>

        <!-- 新增部门弹出框 -->
        <el-dialog title="新增部门" :visible.sync="insertDeptinfo" width="45%">
            <el-form ref="newDept" :model="newDept" label-width="90px">
                <el-form-item label="部门名称">
                    <el-input v-model="newDept.deptName"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="insertDeptinfo = false">取 消</el-button>
                <el-button type="primary" @click="saveDept">确 定</el-button>
            </span>
        </el-dialog>

           <!-- 分页 -->
            <div class="page">
                 <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                 :current-page="currentPage" :page-sizes="[1, 3, 5, 10,]" :page-size="pageSize"
                 layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
            </div>
        </div>
    </div>
</template>



<script>
import { fetchData } from '../../api/index';
export default {
    name: 'basetable',
    data() {
        return {
            query: {},
            flag:true,
            currentPage:1,
            pageSize:5,
            total:0,
            tableData: [],
            tableData2:[],
            form3:{
                pageSize:5,
                pageNum: 1,
                flag:true,
                deptId:"",
                total:0,
            },
            multipleSelection: [],
            editVisible: false,
            insertDeptinfo:false,
            updateEmpinfo:false,
            drawer:false,
            direction:"ttb",
            pageTotal: "",
            form: {},
            form1: {
                deptName: "",
                pageSize: "",
                pageNum:  ""
            },
            newDept: {},
            idx: -1,
            id: -1,
        };
    },

    created() {
        this.deptList();
    },
    methods: {
        handlePageChange(val) {
            this.$set(this.query, 'pageIndex', val);
            this.getData();
        },
        //部门列表
        deptList(){
            let data={
                "pageNum":this.currentPage,
                "pageSize":this.pageSize
            }
            this.$axios.post("/dept/findAll",data).then((response)=>{
            let r = response.data
            this.tableData = r.data.list;
            this.total = r.data.total;
        });
        },
        //弹出新增部门模态框
        insertDept(){
            this.insertDeptinfo = true;
        },
        //点击确定按钮新增部门
        saveDept() {
            this.$axios.post("/dept/insert",this.newDept).then((response) => {
            let r = response.data;   
            if(r.status== 200){
                this.insertDeptinfo = false;
                this.$notify({
                        title: '添加成功',
                        message: '成功添加一个新的部门',
                        type: 'success'
                    });
                this.newDept = "",
                this.deptList();
                }
            });
        },
        // 解散操作
        DeleteDeptStatus(index, row) {
            this.$axios.post("dept/delete",row.deptId,{
                headers:{
                    "Content-Type":"text/plain"
                }
            }).then((response)=>{
                let r=response.data
                if(r.msg=="成功"){
                    this.deptList();
                    this.$notify({
                        title: '解散成功',
                        message: '此部门已解散',
                        type: 'success'
                    });
                }
        })
        },
        //弹出修改档案模态框并回填
        openUpdate(index, row){
            this.updateEmpinfo = true;
            this.form = row;
        },
        //点击确定按钮修改部门信息
        updateEmp(){
            this.$axios.post("/dept/update",this.form).then((response)=>{
               let r = response.data
               if(r.status == 0){
                    this.updateEmpinfo = false;
                    this.$notify({
                        title: '修改成功',
                        message: '成功修改该部门信息',
                        type: 'success'
                    });
                    this.deptList();
               }
            })
        },
        //点击确认搜索
        selectDept(){
            this.form1.pageNum = this.currentPage,
            this.form1.pageSize = this.pageSize
            this.$axios.post("/dept/findLike",this.form1).then((response) => {
                let e = response.data
                this.tableData = e.data.list
                this.total = e.data.total;
                console.log(e.data);
                this.flag = false
                if(e.data.length == 0){
                    this.$message.success(`暂无符合该条件的部门`);
                    this.deptList();
                }
             })
        },
        //重置搜索条件
        resetDept(){
            this.form1.deptName = ""
            this.deptList();
        },
        //点击员工展示部门员工
        openFileForDetails(id){
            this.drawer = true;
            this.form3.deptId = id
            
            //部门对应下属员工数据
            this.$axios.post("/emp/findByDeptId",this.form3).then(response=>{
                let emp = response.data
                if(emp.data.list.length == 0){
                    this.tableData2 = ""
                    this.$message.success(`该部门项目组暂无员工`);
                }else{
                    this.tableData2 = emp.data.list
                    this.form3.total = emp.data.total
                    // this.form3 = emp.data
                }
            })
        },
        // 分页导航
        //每页显示多少条数据
        handleSizeChange:function(size){
            this.pageSize = size;
            this.currentPage = 1;
            if(this.flag){
              this.deptList();
            }else{
              this.selectDept();
            }
        },
        handleCurrentChange:function(currentPage){
            this.currentPage = currentPage;
            if(this.flag){
                this.deptList();
            }else{
              this.selectDept();
            }
        },

        //员工详情模块分页
        handleSizeChange2:function(size){
            this.form3.pageNum = 1;
            this.form3.pageSize = size;
            if(this.flag){
              this.openFileForDetails(this.form3.deptId);
            }
        },
        handleCurrentChange2:function(currentPage){
            this.form3.pageNum= currentPage;
            if(this.flag){
                this.openFileForDetails(this.form3.deptId);
            }
        }
    }
};
</script>



<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}
.table {
    width: 100%;
    font-size: 14px;
}
.red {
    color: #ff0000;
}
.mr10 {
    margin-right: 10px;
}
.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
.drawer-1{
    width: 100%;  
    height: 1350px;
}
#asd3{
    color:chartreuse;
}
</style>
